{extend name="common/__base"}

{block name="body"}
<div>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
    </div>

    <div class="layui-btn-group">
        <button class="layui-btn" id="add">添加菜单</button>
        <button class="layui-btn layui-btn-normal" id="refresh">刷新</button>
    </div>

    <table id="table" class="layui-table" lay-filter="table"></table>
</div>

<!--显示与隐藏-->
<script id="is_show" type="text/html">
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="is_show" {{d.is_show ? "checked" : ""}}>
</script>

<!--操作-->
<script id="operation" type="text/html">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['treeTable', 'jquery', 'form', 'miniTab'], function () {
        let $ = layui.jquery,
            treeTable = layui.treeTable,
            form = layui.form,
            miniTab = layui.miniTab;

        // 树形表格
        let dataTable = treeTable.render({
            elem: "#table",
            tree: {
                iconIndex: 1,
                isPidData: true,
            },
            cols: [[
                {type: "numbers"},
                {title: "菜单名", field: "title"},
                {title: "排序", field: "sort", edit: "text"},
                {title: "显示", toolbar: "#is_show"},
                {title: "操作", toolbar: "#operation"}
            ]],
            url: "{:url('admin/system/menuList')}",
            method: "post",
            parseData: function (res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    data: res.data.list,
                    count: res.data.count
                };
            },
            even: true
        });

        // 排序
        treeTable.on("edit(table)", function (obj) {
            let data = {};
            data[obj.field] = obj.value;
            data['id'] = obj.data.id;
            $.post("{:url('admin/system/menuSet')}", data, function (res) {
                layer.msg(res.msg, function () {
                    location.reload();
                });
            }, "json");
        });

        // 显示和隐藏
        form.on("switch(is_show)", function (obj) {
            let isShow = 1;
            if (obj.elem.checked) {
                isShow = 1;
            } else {
                isShow = 0;
            }
            $.post("{:url('admin/system/menuSet')}", {id: obj.value, is_show: isShow}, function (res) {
                layer.msg(res.msg);
                if (res.code != 1) {
                    obj.elem.checked = !isShow;
                    form.render();
                }
            }, "json");
        });

        // 添加菜单
        $("#add").click(function () {
            miniTab.openNewTabByIframe({
                href: "{:url('admin/system/addMenu')}",
                title: "添加菜单"
            });
            return false;
        });

        // 刷新菜单
        $("#refresh").click(function () {
            location.reload();
            return false;
        });

        // 全部展开
        $("#btn-expand").click(function () {
            dataTable.expandAll();
            return false;
        });

        // 全部折叠
        $("#btn-fold").click(function () {
            dataTable.foldAll();
            return false;
        });

        // 工具
        treeTable.on("tool(table)", function (obj) {
            if (obj.event == "edit") {
                miniTab.openNewTabByIframe({
                    title: "编辑菜单",
                    href: "{:url('admin/system/editMenu')}?id=" +obj.data.id
                });
            } else if (obj.event == "del") {
                layer.confirm("确定删除吗？", {icon: 3, title: "删除菜单"}, function () {
                    $.post("{:url('admin/system/delMenu')}", {id: obj.data.id}, function (res) {
                        layer.msg(res.msg);
                        if (res.code == 1) {
                            obj.del();
                        }
                    }, "json");
                });
            }
        });
    });
</script>
{/block}